import React, { useRef, useState } from "react";
import { Input, Modal, Form, Button, Spin, Layout } from "antd";
import { UploadOutlined } from "@ant-design/icons";
import { formItemLayout,genPath } from "@contants/app";
import utils from "@utils";
import message from "@utils/message";
import css from "./index.scss";

export default (props) => {
  const [isVisible, setIsVisible] = useState(false);
  let [form] = Form.useForm();
  let [cfile, setCfile] = useState(null);
  let ruleSheet = useRef("规则Sheet名称");
  let dataSheet = useRef("数据Sheet名称");
  console.log(ruleSheet);

  form.setFieldsValue({
    dataSheet: "3月销售数据",
    ruleSheet: "时间分类",
  });

  // 确认提交文件
  const onFinish = (values) => {
    console.log(values);
    form.validateFields().then((res) => {
      if (cfile) {
        let formData = new FormData();
        formData.append("file", cfile);
        formData.append("ruleSheet", values["ruleSheet"]);
        formData.append("dataSheet", values["dataSheet"]);
        setIsVisible(true);
        utils.uploadAndDownload(
          genPath("/api/import/order/deal"),
          formData,
          "订单销售处理结果",
          "xls"
        );
        setTimeout(() => {
            setIsVisible(false);
        }, 1500);
      } else {
        message.error("未上传文件");
      }
    });
  };

  // 上传文件
  const importFile = (e) => {
    let file = e.target.files[0];
    if (file) {
      setCfile(file);
    }
  };

  return (
    <div>
      <div className={css.formContainer}>
        <Form
          form={form}
          {...formItemLayout}
          onFinish={onFinish}
          autoComplete="off"
        >
          <Form.Item
            name="goodsName"
            label="待发货订单"
            extra={"支持扩展名：.xls,.xlsx"}
          >
            <div className={css.import}>
              {cfile ? cfile.name : null}
              <Button>
                <UploadOutlined />
                {cfile ? "更换文件" : "上传文件"}
              </Button>
              <input type="file" accept={".xls,.xlsx"} onChange={importFile} />
            </div>
          </Form.Item>

          <Form.Item name="ruleSheet" label="规则Sheet名称">
            <Input placeholder="请输入时间分类" ref={ruleSheet} />
          </Form.Item>

          <Form.Item name="dataSheet" label="数据Sheet名称">
            <Input placeholder="请输入数据Sheet名称" ref={dataSheet} />
          </Form.Item>
          <Form.Item>
            <Button type="primary" htmlType="submit">
              Submit
            </Button>
          </Form.Item>
        </Form>
      </div>
      {isVisible && (
        <div className={css.spinContent} >
          <Spin size="large"></Spin>
        </div>
      )}
    </div>
  );
};
